<template>
  <div id="app">
    <van-nav-bar
      title="订单管理"
      left-text="退出"
      right-text="首页"
      left-arrow
      @click-left="onClickLeft"
      @click-right="onClickRight"
    />
    <!--订单管理栏 -->
    <van-row>
      <van-col span="8" offset="4">
        <van-button class="searchBtn" @click="openDialog()" size="small" round type="info">生成订单</van-button>
      </van-col>
      <van-col span="8" offset="1">
        <van-button class="addBtn" @click="postOrder()" type="primary" size="small" round>确认订单</van-button>
      </van-col>
    </van-row>
    <!--订单列表 -->

    <van-cell-group v-for="item in orderForm.bestlist" :key="item.cid" :border="true">
      <van-cell
        :title="item.cname"
        :label="'零件名:'+item.cname+'---供应商:'+item.sname+'---单价'+item.price+'---数量'+item.num+'---总价'+item.t_price"
      >
        <van-button @click="openUpdate(item.cname)" size="small" plain type="primary">修改</van-button>
        <van-button @click="remove(item.cname)" size="small" plain type="primary">删除</van-button>
      </van-cell>
      <div class="van-hairline--top"></div>
    </van-cell-group>
    <van-cell :value="'订单总额：'+orderForm.best_price" />

    <!-- 生成订单 -->
    <van-overlay :show="addDialogVisible">
      <van-form class="addForm">
        <van-field
          v-for="item in queryInfo"
          :key="item.sid"
          v-model="item.num"
          name="零件名称"
          :label="item.cname"
          placeholder="请填写零件数量"
        />

        <div style="margin: 16px;">
          <van-button plain type="info" @click="addDialogClosed()">取消</van-button>
          <van-button plain type="primary" @click="getOrders()">提交</van-button>
        </div>
      </van-form>
    </van-overlay>
    <!-- 修改 -->
    <van-overlay :show="editDialogVisible">
      <van-form class="editForm">
        <van-field
          readonly
          v-model="otherData.cname"
          name="零件名"
          label="零件名"
          placeholder="零件名"
        />
        <van-cell title="供应商">
          <van-dropdown-menu title-class="dropDownMenu">
            <van-dropdown-item
              class="dropDownMenuItem"
              v-model="otherData.sname"
              :options="otherData.list"
            />
          </van-dropdown-menu>
        </van-cell>
        <div style="margin: 16px;">
          <van-button plain type="info" @click="closeEdit()">取消</van-button>
          <van-button plain type="primary" @click="editOrderInfo()">提交</van-button>
        </div>
      </van-form>
    </van-overlay>



    <div style="height: 3rem;"></div>

    <!-- tabBar -->
    <van-tabbar v-model="tabarActive">
      <van-tabbar-item icon="setting-o" @click="redirects('/comps')">零件列表</van-tabbar-item>
      <van-tabbar-item icon="friends-o" @click="redirects('/supplier')">供应商</van-tabbar-item>
      <van-tabbar-item icon="friends-o" @click="redirects('/contacts')">联系人</van-tabbar-item>
      <van-tabbar-item icon="cart-o" @click="redirects('/order')">订购管理</van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tabarActive: 3,

      //订单查询参数
      queryInfo: [],
      orderForm: [],
      otherData: [],
      // 控制对话框的显示与隐藏
      addDialogVisible: false,
      // 控制修改对话框的显示与隐藏
      editDialogVisible: false,
      // 查询到的信息对象
      editForm: {}
    }
  },
  created() {},
  methods: {
// 删除操作
    async removeComp(cname) {
      const { data: res } = await this.$http.post('order/deleteComp', {
        cname:cname,'data':this.orderForm
      })
      if (res.meta.status == 200) {      
        // 提示修改成功
        this.$toast.success('删除零件信息成功！')
        // 刷新数据列表
        this.orderForm = res.data
      }else {
        return this.$toast.fail('删除零件信息失败！')
      }
    },
    remove(cname){
        this.$dialog.confirm({
        title: '提示',
        message: '是否确认删除零件',
        })
        .then(() => {
        // on confirm
        this.removeComp(cname)

        })
        .catch(() => {
        // on cancel
        this.$toast.success('已取消')
        });
    },
// 展示编辑零件的对话框
    async openUpdate (cname) {
      const { data: res } = await this.$http.get('comp/getCompByName', {
        params: { cname: cname }
      })
      if (res.meta.status !== 200) {
        return this.$message.error('查询零件信息失败！')
      }
      console.log(res)
      this.otherData = res.data
      this.editDialogVisible = true
    },
    // 监听修改用户对话框的关闭事件
    closeEdit () {
      this.editDialogVisible = false
    },
    // 修改订单信息并提交
    async editOrderInfo () {
      
        // 发起修改用户信息的数据请求
        const { data: res } = await this.$http.post(
          'order/updateOrder',
          {'update':this.otherData,'data':this.orderForm}
        )
        console.log(res)
        if (res.meta.status !== 200) {
          return this.$toast.fail('更新零件供应商失败！')
        }
        // 关闭对话框
        this.editDialogVisible = false
        // 刷新数据列表
        this.orderForm = res.data
        // 提示修改成功
        this.$toast.success('更新零件供应商成功！')
 
    },


    // 得到零件信息
    async getCnames() {
      const { data: res } = await this.$http.get('comp/listCompNames')
      if (res.meta.status == 200) {
        this.queryInfo = res.data.cnames
        return this.$toast.success('获取零件列表！')
      } else {
        return this.$toast.fail('获取零件列表失败！')
      }
      console.log(res)
    },
    // 监听订购对话框的关闭事件
    addDialogClosed() {
      this.queryInfo = ''
      this.addDialogVisible = false
    },
    //打开订购对话框
    openDialog() {
      this.getCnames()
      this.addDialogVisible = true
    },
    //得到推荐的订单
    async getOrders() {
      const { data: res } = await this.$http.post('order/getOrder', {
        data: this.queryInfo
      })

      if (res.meta.status !== 200) {
        return this.$toast.fail('生成订单失败！')
      }
      this.orderForm = res.best
      //this.otherData = res.data
      this.$toast.success('成功生成推荐订单！')
      // 隐藏添加用户的对话框
      this.addDialogVisible = false
    },
    // 提交订单
    postOrder() {
      this.$dialog
        .confirm({
          title: '提示',
          message: '是否确认发出订单申请'
        })
        .then(() => {
          // on confirm
          this.orderForm = []
          this.$toast.success('订单申请成功！')
        })
        .catch(() => {
          // on cancel
          this.$toast.success('已取消')
        })
    },

    onClickLeft() {
      this.logout()
    },
    onClickRight() {
      this.$router.push('/home')
    },
    //跳转页面
    redirects(url) {
      this.$router.push(url)
    },
    logout() {
      this.$router.push('/login')
    }
  }
}
</script>

<style lang="less" scoped>

.editForm {
  position: relative;
  top: 10%;
}
.addForm {
  position: relative;
  top: 10%;
}
</style>
